<div id="logonForm" class="logonForm">
    <h4 class="heading">Doctor Oetker Canada Data collection</h4>
    <div class="central clearfix">
        <h5 class="w100 text-center">Select login and password:</h5>
        <div class = "clearfix">
            <label>Login</label>
            <input type="text" class="text" id="userName"/>
        </div>
        <div class = "clearfix">
            <label class = "clearfix">Password</label>
            <input type="password" class="text" id="password"/>
        </div>  
        <button style="float:right;"id="login">Login</button>
    </div>
    <h4 class="copyright">2014. copyright DeltaSim Ltd.</h4>
</div>
<script>
    var LoginFX = function() {
        var _self = this;
        _self.logIn = function() {
            var user = $("#userName").val();
            var password = $("#password").val();
            window.backendInterface.getData(window.CONSTANTS.SERVICE_URL, {
                request: 000,
                autAction: 'logon',
                userName : user,
                password : password
            },
            function(response) {
                if(response === "success"){
                    $("#currentUser").text("User: " + user);
                    document.location.href = "#"+10;
                }
            });
        };
        _self.assignEventHandlers = function() {
            $(document).on("click", "#login", function() {
                _self.logIn();
            });
        };
        _self.clearEventHandlers = function(){
            $(document).off("click", "#login");
        };
    };
    if(!window.loginFX){
        window.loginFX = new LoginFX();
        window.loginFX.clearEventHandlers();
        window.loginFX.assignEventHandlers();
    }
    else{
        window.loginFX.clearEventHandlers();
        window.loginFX.assignEventHandlers();
    }
</script>
